<template>
  <div class="box">
    <div class="main pb10">
      <div class="condition">
        <div class="f aic mb30">
          <div class="f16 bold">分类：</div>
          <div class="f condition-item">
            <div
              @click="changeSubject(item.dictValue)"
              v-for="(item, index) in subjectList"
              :key="10000 + index"
              :class="{ active: courseSubject == item.dictValue }"
            >
              {{ item.remark }}
            </div>
          </div>
        </div>
        <div class="f aic mb30">
          <div class="f16 bold">科目：</div>
          <div class="f condition-item">
            <div class="active">
              {{
                subjectList.find((item) => item.dictValue == courseSubject)
                  ?.dictLabel
              }}
            </div>
            <!-- <div
              @click="changeSubject('')"
              :class="{ active: courseSubject == '' }"
            >
              全部
            </div> -->
            <!-- <div
              @click="changeSubject(item.dictValue)"
              v-for="(item, index) in subjectList"
              :key="10000 + index"
              :class="{ active: courseSubject == item.dictValue }"
            >
              {{ item.dictLabel }}
            </div> -->
          </div>
        </div>
        <div class="f aic">
          <div class="f16 bold">类型：</div>
          <div class="f condition-item">
            <div @click="changeType('')" :class="{ active: courseType == '' }">
              全部
            </div>
            <div
              @click="changeType(item.dictValue)"
              :class="{ active: courseType == item.dictValue }"
              v-for="(item, index) in typeList"
              :key="index"
            >
              {{ item.dictLabel }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="main pt50">
    <div class="f fw">
      <div
        v-for="(item, index) in dataList"
        :key="index"
        class="course-item pointer"
        @click="goPath(item)"
      >
        <img :src="item.courseCover" alt="" width="100%" height="152" />
        <div class="f14 pl10 pr10 pt13 pb20">
          <div class="mb10 tem">
            {{ item.courseName + "（" + item.subsectionCount + "小节）" }}
          </div>
          <div class="course-content tem3">
            {{ item.courseDesc }}
          </div>
          <div class="course-content mt10 mb15">
            课时 · {{ item.totalHours }}课时
          </div>
          <div class="f jcsb aic mb10">
            <el-tag type="danger" color="#F01414" effect="dark">
              报岗指导
            </el-tag>
            <div class="course-content">
              已有{{ item.attendance || 0 }}人参加
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="Pagination">
      <el-pagination
        @size-change="changeSize"
        @current-change="changePage"
        :current-page="currentPage"
        :page-size="pageSize"
        background
        layout="total, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import { getImageUrl } from "@/utils/index";
import {
  getCourseList,
  getCourceChapterDetails,
  getCourcePaperDetails,
} from "@/api/course/course";
import { getDictOption } from "@/api/course/index";
const route = useRouter();

//列表数据
const dataList = ref([]);
const courseType = ref("");
const currentPage = ref(1);
const pageSize = ref(8);
const total = ref(0);
const courseName = ref(null);
const courseSubject = ref("1");
const subjectList = ref([]);
const typeList = ref([]);
async function getSubjectListData() {
  await getDictOption("subject").then((res) => {
    subjectList.value = res.data;
  });
}
function getTypeListData() {
  getDictOption("course_type").then((res) => {
    typeList.value = res.data;
  });
}

// 修改后的加载数据方法
function loadData() {
  try {
    getCourseList({
      courseName: courseName.value,
      courseSubject: courseSubject.value,
      courseType: courseType.value,
      isStatus: 1,
      pageNum: currentPage.value,
      pageSize: pageSize.value,
    }).then((res) => {
      dataList.value = res.rows;
      total.value = res.total;
    });
  } catch (error) {
    console.error("加载数据失败", error);
  }
}
function changeSize(data) {
  pageSize.value = data;
  loadData();
}
function changePage(data) {
  currentPage.value = data;
  loadData();
}
onMounted(async () => {
  await getSubjectListData();
  loadData(); // 初始化加载数据
  getTypeListData();
});

const changeSubject = (type) => {
  courseSubject.value = type;
  loadData(); // 初始化加载数据
};
const changeType = (type) => {
  courseType.value = type;
  loadData(); // 初始化加载数据
};

const goPath = (item) => {
  route.push({
    path: "/learnVideo",
    query: {
      id: item.id,
    },
  });
};
</script>
<style lang="scss" scoped>
.box {
  background: #f5f7fa;
}
.main {
  width: 1154px;
  margin: 0 auto;
  padding: 80px 0 15px;
  .condition {
    font-size: 14px;
    padding: 40px 0 30px;
    .condition-item {
      color: #646464;
      > div {
        padding: 7px 8px;
        border-radius: 5px;
        cursor: pointer;
        margin-right: 10px;
        &:hover {
          color: #f01414;
        }
        &.active {
          background: #f01414;
          color: #fff;
        }
      }
    }
  }

  // 内容
  .course-item {
    width: 272px;
    // height: 282px;
    background: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    color: #6e747a;
    margin-right: 22px;
    margin-bottom: 22px;
    box-shadow: 0 0 10px 3px rgba(208, 208, 208, 0.3);
    &:nth-child(4n) {
      margin-right: 0;
    }
    .course-content {
      line-height: 24px;
      opacity: 0.7;
      &.tem3 {
        height: 24 * 3px;
      }
    }
    &:hover {
      box-shadow: 0 0 10px 3px rgba(208, 208, 208, 0.7);
    }
  }
  .Pagination {
    display: flex;
    justify-content: right;
    width: 100%;
  }
}
</style>
